<template>
    <view class="container">
        <!-- 主要内容区域 -->
        <view class="content">
            <!-- 月份选择 -->
            <view class="month-selector">
                <picker 
                    mode="date" 
                    fields="month"
                    :value="selectedDate" 
                    @change="onDateChange"
                    class="date-picker"
                >
                    <view class="picker-content">
                        <text class="picker-text">{{ selectedMonth }}</text>
                        <text class="iconfont icon-rili picker-icon"></text>
                    </view>
                </picker>
            </view>

            <!-- 实发工资卡片 -->
            <view class="salary-card">
                <view class="salary-label">实发工资 (元)</view>
                <view class="salary-amount">{{ netSalary }}</view>
            </view>

            <!-- 收入明细 -->
            <view class="detail-section">
                <view class="section-title">收入明细</view>
                <view class="detail-list">
                    <view 
                        class="detail-item" 
                        v-for="item in incomeItems" 
                        :key="item.key"
                    >
                        <text class="item-label">{{ item.label }}</text>
                        <text class="item-amount income">{{ item.amount }}</text>
                    </view>
                </view>
            </view>

            <!-- 扣除明细 -->
            <view class="detail-section">
                <view class="section-title">扣除明细</view>
                <view class="detail-list">
                    <view 
                        class="detail-item" 
                        v-for="item in deductionItems" 
                        :key="item.key"
                    >
                        <text class="item-label">{{ item.label }}</text>
                        <text class="item-amount deduction">{{ item.amount }}</text>
                    </view>
                </view>
            </view>

            <!-- 工资趋势图表 -->
            <view class="chart-section">
                <view class="section-title">近6个月工资趋势</view>
                <view class="chart-container">
                    <canvas 
                        canvas-id="salaryChart" 
                        id="salaryChart" 
                        class="chart-canvas"
                        @touchstart="touchChart"
                    ></canvas>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import uCharts from '@qiun/ucharts'

// 选中的月份
const selectedMonth = ref('2025年7月')
// 选中的日期（用于picker组件）
const selectedDate = ref('2025-07')

// 实发工资
const netSalary = ref('18,650.00')

// 收入明细
const incomeItems = ref([
    {
        key: 'baseSalary',
        label: '基本工资',
        amount: '12,000.00'
    },
    {
        key: 'performanceBonus',
        label: '绩效奖金',
        amount: '5,000.00'
    },
    {
        key: 'transportAllowance',
        label: '交通补贴',
        amount: '300.00'
    },
    {
        key: 'mealAllowance',
        label: '餐饮补贴',
        amount: '500.00'
    }
])

// 扣除明细
const deductionItems = ref([
    {
        key: 'socialSecurity',
        label: '社保',
        amount: '-1,200.00'
    },
    {
        key: 'housingFund',
        label: '公积金',
        amount: '-960.00'
    },
    {
        key: 'incomeTax',
        label: '个人所得税',
        amount: '-890.00'
    }
])


let uChartsInstance = null

// 日期选择器变化事件
function onDateChange(e) {
    const dateValue = e.detail.value // 格式: "2025-07"
    selectedDate.value = dateValue
    
    // 将日期转换为中文格式
    const [year, month] = dateValue.split('-')
    selectedMonth.value = `${year}年${parseInt(month)}月`
    
    // 这里可以添加切换月份的逻辑，比如重新加载对应月份的工资数据
    console.log('选择的月份:', selectedMonth.value)
}

// 初始化图表
function initChart() {
    
    const ctx = uni.createCanvasContext('salaryChart')
    
    // 最基础的配置
    const config = {
        type: 'line',
        context: ctx,
        width: 600,
        height: 200,
        categories: ['2月', '3月', '4月', '5月', '6月', '7月'],
        series: [{
            name: '工资',
            data: [17000, 17500, 18000, 18200, 18400, 18650]
        }],
        background: '#FFFFFF',
        color: ['#4095E5'],
        padding: [20, 20, 20, 20],
        legend: {
            show: false
        },
        xAxis: {
            disableGrid: true,
            fontColor: '#666666',
            fontSize: 12
        },
        yAxis: {
            gridType: 'dash',
            dashLength: 2,
            fontColor: '#666666',
            fontSize: 12
        }
    }
    
    
    uChartsInstance = new uCharts(config)
    
    
    // 检查实例方法
    if (uChartsInstance) {
        
        // 尝试调用绘制方法
        setTimeout(() => {
            try {
                if (typeof uChartsInstance.updateData === 'function') {
                    uChartsInstance.updateData()
                    console.log('调用updateData成功')
                } else if (typeof uChartsInstance.render === 'function') {
                    uChartsInstance.render()
                    console.log('调用render成功')
                } else if (typeof uChartsInstance.draw === 'function') {
                    uChartsInstance.draw()
                    console.log('调用draw成功')
                }
            } catch (error) {
                console.error('绘制错误:', error)
            }
        }, 100)
    }
}

// 图表触摸事件
function touchChart(e) {
    if (uChartsInstance) {
        // 使用安全的API调用
        if (typeof uChartsInstance.touchLegend === 'function') {
            uChartsInstance.touchLegend(e)
        }
        if (typeof uChartsInstance.showToolTip === 'function') {
            uChartsInstance.showToolTip(e)
        }
    }
}

// 销毁图表
function destroyChart() {
    if (uChartsInstance) {
        try {
            // 尝试调用销毁方法
            if (typeof uChartsInstance.destroy === 'function') {
                uChartsInstance.destroy()
                console.log('图表销毁成功')
            } else if (typeof uChartsInstance.clear === 'function') {
                uChartsInstance.clear()
                console.log('图表清理成功')
            }
        } catch (error) {
            console.error('销毁图表时出错:', error)
        } finally {
            // 清空实例引用
            uChartsInstance = null
        }
    }
}

// 页面加载完成后初始化图表
onMounted(() => {
    // 延迟初始化，确保DOM完全渲染
    setTimeout(() => {
        initChart()
    }, 500)
})

// 页面卸载时销毁图表
onUnmounted(() => {
    console.log('页面卸载，开始销毁图表')
    destroyChart()
})
</script>

<style>
.container {
    height: 100vh;
    background-color: #f5f5f5;
    padding: 0 30rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.content {
    padding: 0 20rpx;
    padding-bottom: 40rpx;
    margin-top: 30rpx;
    flex: 1;
    overflow-y: auto;
}

.month-selector {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.date-picker {
    width: 100%;
}

.picker-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    background: #fff;
}

.picker-text {
    font-size: 28rpx;
    color: #333;
}

.picker-icon {
    font-size: 32rpx;
    color: #4095E5;
}

.salary-card {
    background: linear-gradient(135deg, #4095E5, #0e375e);
    border-radius: 16rpx;
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;
    text-align: center;
    box-shadow: 0 4rpx 16rpx rgba(64, 149, 229, 0.3);
}

.salary-label {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20rpx;
}

.salary-amount {
    font-size: 72rpx;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}

.detail-section {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
}

.detail-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
}

.detail-item:last-child {
    border-bottom: none;
}

.item-label {
    font-size: 28rpx;
    color: #666;
}

.item-amount {
    font-size: 28rpx;
    font-weight: 500;
}

.item-amount.income {
    color: #333;
}

.item-amount.deduction {
    color: #f44336;
}

.chart-section {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 100rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.chart-container {
    width: 100%;
    height: 400rpx;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1rpx solid #f0f0f0;
    border-radius: 8rpx;
    background: #fff;
}

.chart-canvas {
    width: 600px;
    height: 200px;
    min-width: 600px;
}
</style> 